//  引入gulp
const gulp = require('gulp')
// 引入 html 依赖 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 引入 css  依赖 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 引入sass 依赖   gulp-sass  sass
const sass = require('gulp-sass')(require('sass'))
//  引入js 依赖   gulp-uglify
const uglify = require('gulp-uglify')
//  引入babel 依赖  gulp-babel
const babel = require('gulp-babel')
//  引入 del 依赖  del  删除dist
const del = require('del')
// 引入 webserver 依赖  gulp-webserver
const server = require('gulp-webserver')






//  创建一个html打包压缩的任务 
const htmlHandler = function () {
    //  表示打包从什么地方开始 
    return gulp.src('./src/**/*.html')
        //管道函数  进行编译压缩
        .pipe(htmlmin({
            removeComments: true, //清除HTML注释
            collapseWhitespace: true, //压缩HTML
            collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input 		checked />
            minifyJS: true, //压缩页面JS
            minifyCSS: true //压缩页面CSS 
        }))
        // 打包以后 把文件放在dist目录下面什么地方
        .pipe(gulp.dest('./dist'))
}

//  创建一个css打包压缩任务 (sass)

const cssHandler = function () {
    //  表示打包从什么地方开始 
    return gulp.src('./src/sass/*.scss')
        //把sass 转译成css
        .pipe(sass())
        // 管道函数 
        .pipe(cssmin())
        //  打包以后 放在dist下面的css文件中
        .pipe(gulp.dest('./dist/css'))
}

// 创建一个js打包压缩任务

const jsHandler = function () {
    return gulp.src('./src/js/**')
        //  先把es6语法转译成es5语法
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
}

//  创建 img  libs  data  打包压缩任务 

const libsHandler = function () {
    return gulp.src('./src/libs/**')
        .pipe(gulp.dest('./dist/libs'))
}
const imgHandler = function () {
    return gulp.src('./src/img/**')
        .pipe(gulp.dest('./dist/img'))
}
const dataHandler = function () {
    return gulp.src('./src/data/**')
        .pipe(gulp.dest('./dist/data'))
}
// const fontHandler = function () {
//     return gulp.src('./src/font/**')
//         .pipe(gulp.dest('./dist/font'))
// }
// const bootstrap1Handler = function () {
//     return gulp.src('./src/bootstrap/css/**')
//         .pipe(gulp.dest('./dist/bootstrap/css'))
// }
// const bootstrap2Handler = function () {
//     return gulp.src('./src/bootstrap/fonts/**')
//         .pipe(gulp.dest('./dist/bootstrap/fonts'))
// }
// const bootstrap3Handler = function () {
//     return gulp.src('./src/bootstrap/js/**')
//         .pipe(gulp.dest('./dist/bootstrap/js'))
// }


//  创建一个删除dist 的任务  
const delHandler = function () {
    return del(['./dist'])
}

//  创建一个server 任务  

const serverHandler = function () {
    return gulp.src('./dist')
        .pipe(server({
            host: 'localhost', // 配置打开浏览器的域名
            port: 9001, // 配置打开浏览器的端口号
            livereload: true, // 自动刷新浏览器
            open: './index.html' // 默认打开 dist 文件夹下的哪个文件
        }))
}

  //  创建 一个watch 任务
const watch =  function () {
    gulp.watch('./src/sass/*.scss', cssHandler)
    gulp.watch('./src/js/**', jsHandler)
    gulp.watch('./src/**/*.html', htmlHandler)
    gulp.watch('./src/libs/**', libsHandler)
    gulp.watch('./src/img/**', imgHandler)
    gulp.watch('./src/data/**', dataHandler)
    // gulp.watch('./src/font/**', fontHandler)
    // gulp.watch('./src/bootstrap/css/**', bootstrap1Handler)
    // gulp.watch('./src/bootstrap/fonts/**', bootstrap2Handler)
    // gulp.watch('./src/bootstrap/js/**', bootstrap3Handler)
}

// module.exports = {
//     htmlHandler,
//     cssHandler,
//     jsHandler,
//     libsHandler,
//     imgHandler,
//     dataHandler
// }

//  异步执行 所有任务
// module.exports.default = gulp.parallel(htmlHandler,
//     cssHandler,
//     jsHandler,
//     libsHandler,
//     imgHandler,
//     dataHandler)
//  同步执行  

// module.exports.default = gulp.series(htmlHandler,
//     cssHandler,
//     jsHandler,
//     libsHandler,
//     imgHandler,
//     dataHandler)

module.exports.default = gulp.series(
    delHandler,
    gulp.parallel(htmlHandler,
        cssHandler,
        jsHandler,
        libsHandler,
        imgHandler,
        dataHandler,
        // fontHandler,
        // bootstrap1Handler,
        // bootstrap2Handler,
        // bootstrap3Handler,
        ),
    serverHandler,
    watch
)